/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    SafeAreaView,
    TouchableOpacity,
    ImageBackground,
    Dimensions,
    FlatList
} from 'react-native';
// import {observer} from 'mobx-react';
import ImageTextWithArrowView from "./ImageTextWithArrowView";
import DividerLineH from "./DividerLineH";
import NavigationBar from "teaset/components/NavigationBar/NavigationBar";

let screenW = Dimensions.get('window').width;
type Props = {};
export default class MyCardScreen extends Component<Props> {

    constructor(props) {
        super(props);

        this.state = {
            value: 1
        }
    }

    // static navigationOptions = ({navigation}) => {
    //     return {
    //         header: (
    //             <NavigationBar
    //                 titleItemTextStyle={{color: colors.titleColor}}
    //                 navigation={navigation}
    //                 backgroundColor={colors.whiteColor}
    //                 navigationTitleItem={''}
    //                 statusBarStyle={'dark-content'}
    //                 themeStyle={'default'}
    //             />
    //         )
    //     };
    // };


    componentDidMount() {

    }

    // renderCard = () =>{
    //     <ImageBackground style={{backgroundColor:'f5f5f5'}} padding: 15>
    //
    //     </ImageBackground>
    // }
    //收货列表
    renderList = () => {
        return (
            <FlatList
                style={{flex: 1, marginTop: 15}}
                data={[{title: 'sjdfj'}, {title: 'sjdfj'}]}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => index.toString()}
                ListFooterComponent={this.ListFooter}
                ListFooterComponentStyle={{alignItems:'center', justifyContent: 'center'}}

            />
        );
    }
    renderItem = ({item}) => {
        return (
            <ImageBackground style={{backgroundColor: 'f5f5f5', padding: 15, width:screenW, height:200}}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Image style={{backgroundColor: 'f5f5f5', height: 30, width: 30}}/>
                    <Text>kkkkk</Text>
                </View>
            </ImageBackground>
        );

    }
    ListFooter= () =>{
        return (
            <View style={{flexDirection:'row', alignItems:'center', height:40, width:100, backgroundColor:'red', justifyContent: 'center'}}>
                <Image />
                <Text>add</Text>
            </View>
        );
    }



    render() {

        return (
            <View style={styles.container}>
                {this.renderList()}
            </View>
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

